<template>
  <div class="sys-search">
    <el-input v-model="currValue" size="small"  v-bind="$attrs"/>
    <i class="sys-search-icon el-icon-search" @click="onSearch"></i>
  </div>
</template>

<script>
export default {
  name: 'sys-search',
  cnName: '搜索',
  props: {
    value: String
  },
  data() {
    return {
      currValue: this.value
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.currValue)
    }
  },
  watch: {
    value(nval) {
      this.currValue = nval
    },
    currValue() {
      this.$emit('input', this.currValue)
    }
  }
}
</script>

<style lang="less" scoped>
.sys-search {
  position: relative;

  &-icon {
    position: absolute;
    right: 15px;
    top: 2px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #c4c9db;

    &:hover {
      color: #409EFF;
    }
  }

  /deep/ .el-input__inner {
    border-radius: 20px;
  }
}
</style>
